<template>

  <v-content class="bg fill-height">
    <v-container fluid style="height:100%;padding:0;">
      <v-layout align-start justify-center>
        <v-flex xs11 sm8 md8 class="mgt">
          <div>
            <p class="text-center mg-clear">
              <img src="../assets/img/logo_white.png" alt="logo" width="87.5" height="63">
            </p>
            <p class="project-name">
              <span>云食安</span>
            </p>
          </div>
          <div class="form-wrapper">
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field autocomplete="off" label="请输入账号" prepend-inner-icon="mdi-account-outline"
                            v-model="form.username" autofocus :rules="rules.username" type="text"
                            @keyup.enter.native="submitForm">
              </v-text-field>
              <v-text-field autocomplete="off" label="请输入密码" prepend-inner-icon="mdi-lock-outline"
                            v-model="form.password"
                            :rules="rules.password" @keyup.enter.native="submitForm" type="password">
              </v-text-field>
            </v-form>
            <div class="mgt-10">
              <xy-button rounded :loading="loading" @click="submitForm">登录</xy-button>
            </div>
          </div>
          <div style="margin-top:-20px;">
            <img src="../assets/img/login-pic.png" class="login-pic" alt="">
          </div>
        </v-flex>
      </v-layout>

      <v-footer>
        <div class="footer-wrapper">
          <p>Copyright &copy; 2017 轩亚科技提供技术支持</p>
          <p>客服热线：400-6677370</p>
        </div>
      </v-footer>
    </v-container>

  </v-content>

</template>

<script>
    import qs from 'qs';

    /**
     * 登录页面
     * @author Canaan
     * @date 2019/8/9 18:20.
     */
    export default {
        name: 'login',
        mounted() {

        },
        components: {},
        props: {},
        data() {
            return {
                loading: false,
                form: {
                    username: '',
                    password: ''
                },
                valid: true,
                rules: {
                    username: [
                        value => this.verify.required(value, " "),
                        value => this.verify.strLength(value, 4, 16, "长度在4-16之间"),
                        value => this.verify.isUserName(value)
                    ],
                    password: [
                        value => this.verify.required(value, " "),
                        value => this.verify.strLength(value, 4, 16)
                    ]
                }
            }
        },
        computed: {},
        methods: {
            myLoading() {
                this.$loadingShow()
            },
            submitForm() {
                // this.$bus.$emit(this.$env.TOKEN_INVALID);
                if (!this.$refs.form.validate()) {
                    return;
                }

                if (this.loading) {
                    return;
                } else {
                    this.loading = true;
                }

                let param = {
                    'username': this.form.username,
                    'password': this.form.password,
                    'endpoint': 'mobile'
                };

                //登录遮罩，最多持续5秒
                setTimeout(() => this.loading = false, 5 * 1000);

                //提交表单
                this.$axios.post("/tasty_mgr/login.do", qs.stringify(param), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'accept': 'application/json'
                    },
                    validateStatus: function (status) {
                        return status >= 200 && status < 404; // 默认的
                    },
                }).then(res => {
                    this.loading = false;

                    if (res.data && res.data.code === 'Security.badCredentials') {
                        this.$message.error('账号或密码错误');
                        return;
                    }

                    // 发布登录成功事件
                    if (res.data && res.data.tokenType === 'bearer') {
                        let emitData = Object.assign({}, {
                            username: this.form.username,
                            rememberMe: this.rememberMe,
                            token: res.data.value,
                            tokenType: res.data.tokenType
                        }, res.data.additionalInformation);

                        this.$bus.$emit(this.$env.LOGIN_SUCCESS, emitData);
                        return;
                    }

                    //登录失败
                    this.$message.error('登录失败');


                }).catch(function (error) {
                    this.loading = false;

                    if (error.response) {
                        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                        this.$alert("【" + error.response.status + "】请求出错了" + JSON.stringify(error.response.data));
                    } else {
                        this.$alert("请求出错了：" + error.message);
                    }
                    return Promise.reject(error);
                });

            }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .bg {
    background: url("../assets/img/login-bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .v-text-field {
    padding: 12px;
    margin-top: 0;
  }

  .project-name {
    font-family: "MicrosoftYaHei-Bold";
    font-size: 27px;
    font-weight: normal;
    font-stretch: normal;
    text-align: center;
    color: #ffffff;
    margin-bottom: 30px;
  }

  .mg-clear {
    margin: 0
  }

  .mgt {
    margin-top: 42px;
  }


  .footer-wrapper {
    margin: 0 auto;

  }

  .footer-wrapper p {
    text-align: center;
    margin: 0;
    font-size: 12px;
    color: #fff;
  }

  .form-wrapper {
    background-image: linear-gradient(0deg, #f1f2f5 11%, #fbfcfc 50%, #ffffff 100%);
    padding: 20px;
    border-radius: 8px;
  }

  .v-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: unset !important;
  }

  .login-pic {
    width: 100%;
    height: 100%;
  }

  .mgt-10 {
    margin-top: 10px;
  }


</style>
